<script setup lang="ts">
import diamondImg from './img/diamond.png'
import infoImg from './img/info.png'
import VIP5Img from './img/VIP5.png'
import {reactive, ref} from "vue";
import {sleep} from "@/utils/common-fn";
import CurrencyTypesIndex from "@/views/qq/home/home-top/CurrencyTypes/CurrencyTypesIndex.vue";
import SystemSettingIndex from "@/views/qq/home/home-top/SystemSetting/SystemSettingIndex.vue";
import ProgressBar from "@/views/qq/home/home-top/HeadInfo/ProgressBar.vue";
import BaseButton from "@/views/qq/base/BaseButton.vue";
import RechargeAmount from "@/views/qq/top/recharge/content/RechargeAmount.vue";
import ApplePay from "@/views/qq/top/recharge/pay/ApplePay.vue";

const showApplePay = ref(false)
let rechargeItem = reactive<{ id: number, count: number, email: string }>(
    {id: 1, count: 1, email: '123456789@qq.com'}
)

// 充钱啦
async function recharge(id: number) {
  console.log('————充钱啦，此处可以加载一些动画——————')
  await sleep(200)
  rechargeItem = {id, count: id, email: '123456789@qq.com'}
  showApplePay.value = true
}

// 取消付钱
function cancelPay() {
  showApplePay.value = false
}
</script>

<template>
  <div class="right-content">
    <div class="base-display">
      <div class="recharge-tip">
        <p class="info-text my_nowrap">充值</p>
        <img class="info-icon" alt="" :src="infoImg"/>
      </div>
      <div class="recharge-base">
        <CurrencyTypesIndex class="currency"/>
        <SystemSettingIndex/>
      </div>
    </div>
    <div class="tip my_nowrap">适度娱乐，理性消费</div>
    <div class="main-content">
      <div class="recharge-info">
        <div class="info-icon">
          <img :src="VIP5Img" alt="" class="vip-icon">
        </div>
        <div class="info-detail">
          <div class="info-detail-top">
            <div class="info-detail-left">
              <span class="my_nowrap">充值</span>
              <img class="diamondImg" alt="" :src="diamondImg">
              <span class="yellow-text">1000</span>
            </div>
            <div class="info-detail-center">
              <span class="normal-text my_nowrap">可升级为</span>
              <span class="yellow-text my_nowrap">贵族6</span>
            </div>
          </div>
          <div class="info-detail-bottom">
            <ProgressBar type="deep" :percent="4000/5000*100">
              4000/5000
            </ProgressBar>
          </div>
        </div>
        <div class="info-button">
          <BaseButton color="yellow">贵族特权</BaseButton>
          <BaseButton>联系客服</BaseButton>
          <BaseButton>流量包</BaseButton>
        </div>
      </div>
      <RechargeAmount class="recharge-list" @recharge="recharge"/>
    </div>
  </div>
  <ApplePay :show="showApplePay" :item="rechargeItem" @cancel="cancelPay"/>
</template>
<style scoped lang="scss">
.right-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1em;

  .base-display {
    display: flex;

    .recharge-tip {
      flex: 1;
      display: flex;
      align-items: center;

      .info-text {
        font-size: 1.6em;
        font-weight: bold;
      }

      .info-icon {
        height: 2em;
        margin-left: 0.8em;
      }
    }

    .recharge-base {
      display: flex;

      > * + * {
        margin-left: 3em;
      }
    }
  }

  .tip {
    padding-top: 3em;
    padding-bottom: 0.2em;
    text-align: right;
    opacity: 0.7;
    font-size: 0.9rem;
  }

  .main-content {
    display: flex;
    flex-direction: column;
    padding: 0 1em;

    .recharge-info {
      display: flex;
      align-items: center;
      background-color: #364bb8a1;

      .info-icon {
        .vip-icon {
          height: 4em;
        }
      }

      .info-detail {
        display: flex;
        flex-direction: column;
        padding: 0.4em 2em;

        .info-detail-top {
          display: flex;
          padding: 0.2em 0;

          .info-detail-left {
            display: flex;

            > * + * {
              margin-left: 0.4em;
            }

            .diamondImg {
              height: 1em;
              border-radius: 50%;
            }

            .yellow-text {
              color: #ffea39;
            }
          }

          .info-detail-center {
            display: flex;
            margin-left: 4em;
            margin-right: 8em;

            > * + * {
              margin-left: 0.4em;
            }

            .yellow-text {
              color: #ffea39;
              font-size: 1.1rem;
            }
          }
        }

        .info-detail-bottom {

        }
      }

      .info-button {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        margin-right: 2em;

        > * + * {
          margin-left: 1em;
        }
      }
    }

    .recharge-list {
      margin-top: 1.2em;
    }
  }
}

</style>